<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
      function sendAjax(){
          // 1.创建XMLHttpRequest对象
          var xhr = new XMLHttpRequest()

          // 2.绑定状态变化事件
          xhr.onreadystatechange = function(){
              if(xhr.readyState == 4 && xhr.status == 200){
                  var data = xhr.responseText
                  // console.log(data)
                  // console.log(typeof data)
                  //
                  // var arr = JSON.parse(data)
                  // console.log(arr)

                  // for (var user of arr){
                  //     console.log(user.name, user.height, user.birthday)
                  // }

                  // if (data == 'success'){
                  //     document.getElementById('info').innerText = '欢迎您！'
                  // }else{
                  //     document.getElementById('info').innerText = '用户名或密码错误！'
                  // }

                  var result = JSON.parse(data)
                  if(result.status == 200){
                      document.getElementById('info').innerText = '欢迎您：' + result.data.name
                  }else{
                      document.getElementById('info').innerText = result.msg
                  }
              }
          }


          // 3.与服务器建立连接
          xhr.open('get', 'login?username=admin&password=123')

          // 4.发送请求
          xhr.send()

      }
    </script>
</head>
<body>
  <button onclick="sendAjax()">发送Ajax请求</button>

    <div id="info"></div>
</body>
</html>